<template>
  <s-layout id="layout" :title="'写'+ state.topName +'报'" navbar="normal" leftIconColor="#333" :autoBack="false" :bgColor="state.bgColor"
    :tabbarshow='false' :titleStyle="{ color: '#333', fontSize: '32rpx' }">
    <view class="call_on" :style="{ paddingTop: (safeAreaInsets?.top + 44) + 'px' }">
      <view class="item_wrap">
        <!-- 表单结构 -->
        <uni-forms ref="relRef" v-model="state.formData" :rules="state.rules" validateTrigger="bind" labelWidth="120">
          <uni-forms-item name="accomplish" label="">
            <view class="title">{{ state.publicName }}总结</view>
            <view class="cont">
              <uni-easyinput type="textarea" v-model="state.formData.accomplish" :inputBorder="false"
                placeholder="输入正文内容" :maxlength="-1" />
            </view>

          </uni-forms-item>
          <uni-forms-item name="unfinished" label="">
            <view class="title">{{ state.publicName }}未完成工作内容</view>
            <view class="cont">
              <uni-easyinput type="textarea" v-model="state.formData.unfinished" :inputBorder="false"
                placeholder="输入正文内容" :maxlength="-1" />
            </view>

          </uni-forms-item>
          <uni-forms-item name="harmony" label="">
            <view class="title">{{state.publicName}}需协调工作内容</view>
            <view class="cont">
              <uni-easyinput type="textarea" v-model="state.formData.harmony" :inputBorder="false"
                placeholder="输入正文内容" :maxlength="-1" />
            </view>

          </uni-forms-item>
          <view class="card">
            <view class="title">上传图片</view>
            <u-upload :fileList="state.fileList1" @afterRead="imageUpload" @delete="deletePic" name="10" multiple
              :maxCount="4">
            </u-upload>
          </view>
        </uni-forms>
      </view>

    </view>

    <!-- 底部提交按钮 -->
    <view >
      <s-button @netWork="submitForm" :text="text"></s-button>
    </view>

   

  </s-layout>
</template>

<script setup>
import { baseUrl } from '@/sheep/config';
import sheep from '@/sheep';
import { ref, reactive, unref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
const { safeAreaInsets } = uni.getSystemInfoSync()
const text = ref("提交");
const state = reactive({
  bgColor: '#fff',
  publicName:'',
  topName:'',
  fileList1: [],
  formData: {
    accomplish: '',//完成
    unfinished:'',//未完成
    harmony:'',//协调
    uploadimg:''

  },
  rules: {
    accomplish: {
      rules: [{
        required: true,
        errorMessage: '请输入内容'
      }]
    },
    unfinished: {
      rules: [{
        required: true,
        errorMessage: '请输入内容'
      }]
    },
    harmony:{
      rules: [{
        required: true,
        errorMessage: '请输入内容'
      }]
    }
  },
});


const editid = ref('')
onLoad((options) => {
  editid.value =  options.id
  if(options.id == 'daliy'){
    state.publicName = '今日'
    state.topName = '日'
  }else if(options.id == 'monthly'){
    state.publicName = '本月'
    state.topName = '月'
  }else if(options.id == 'newspaper'){
    state.publicName = '本周'
    state.topName = '周'
  }
})

const relRef = ref();
const submitForm = async () => {
  const validate = await unref(relRef)
    .validate()
    .catch((error) => {
    });
  if (!validate) return;
  // if (state.fileList1 == '') {
	// 	uni.showToast({
	// 		title: '请上传图片',
	// 		icon: 'none',
	// 		duration: 1000
	// 	})
	// 	return false
	// }
  state.formData.uploadimg = postData.value.join(',')
  let parpam = {
    type: editid.value == 'daliy'?'1':editid.value == 'newspaper'?'2':'3' ,
    done_content: state.formData.accomplish,
    undone_content: state.formData.unfinished,
    need_coord_content: state.formData.harmony,
    images: state.formData.uploadimg,
  }
  sheep.$api.report.postDailyRecordAdd(parpam).then((res) => {
    uni.showToast({
      title: res.msg,
      icon: 'none',
      duration: 1000
    })
    setTimeout(function () {
      sheep.$router.back()
    }, 500);
  });
};

// 删除图片
const deletePic = (event) => {
  state.fileList1.splice(event.index, 1);
};

// 新增图片
const imageUpload = async (event) => {
  let lists = [].concat(event.file);
  let fileListLen = state.fileList1.length;
  lists.map((item) => {
    state.fileList1.push({
      ...item,
      status: 'uploading',
      message: '上传中',
    });
  });
  for (let i = 0; i < lists.length; i++) {
    const url = await uploadFilePromise(lists[i].url);
    let item = state.fileList1[fileListLen];
    state.fileList1.splice(fileListLen, 1, {
      ...item,
      status: 'success',
      message: '',
      url: sheep.$url.cdn(url),
    });
    fileListLen++;
  }
};
const postData = ref([])
async function uploadFilePromise(tempUrl) {
  let { url } = await sheep.$api.app.upload(tempUrl, 'ugc');
  postData.value.push(url);
  return url;
};

</script>

<style lang="scss" scoped>
//列表
.call_on {
  width: 100%;
  width: calc(100% - 40rpx);
  background-color: transparent;
  margin: 0 20rpx;

  .item_wrap {
    margin-top: 20rpx;
    width: 100%;
    margin-bottom: 170rpx;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.05);

    :deep(.uni-forms) {
      padding-top: 10rpx;

      .uni-forms-item {
        border-radius: 16rpx;
        background-color: #FFFFFF;
        box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.05);

        .title {
          height: 100rpx;
          margin: 0 30rpx;
          padding-left: 15rpx;
          font-family: PingFangSC;
          color: $uni-text-color;
          font-weight: $uni-font-weight;
          font-size: 30rpx;
          display: flex;
          align-items: center;
          border-bottom: 1rpx solid #efefef;
        }
      }

      .uni-easyinput {
        height: 100rpx;
        width: 92%;
        margin: 0 auto;

        .uni-easyinput__content-input {
          height: 100rpx;
          color: #333 !important;
          font-weight: $uni-font-weight;
          font-size: 30rpx;
          padding: 0 10rpx;
        }

      }

      .uni-forms-item__error {
        left: inherit;
        right: 20rpx;
      }
    }

  }
  :deep(.uni-easyinput__content-textarea) {
    color: #999 !important;
    font-weight: 500;
   font-size:$uni-font-size-26;
    height: 600rpx !important;
    overflow-y: auto;
    padding: 0 15rpx;
  }

  :deep(.uni-easyinput__content.is-input-border.is-textarea) {
    border: none !important;

    .uni-easyinput__placeholder-class {
      font-size: 26rpx !important;
      color: #999;
      font-weight: 500;
    }
  }

  :deep(.uni-easyinput__content-textarea) {
    color: #999 !important;
    font-weight: 500;
   font-size:$uni-font-size-26;
    height: 366rpx !important;
    overflow-y: auto;
    padding: 0 15rpx;
  }

  .title {
    position: relative;

    :deep(.uni-easyinput__content) {
      border-bottom: 2rpx solid #EFEFEF;
    }

    .limit {
      position: absolute;
      right: 11%;
      top: 35%;
      z-index: 9;
      color: #999;
      color: #999999;
      font-weight: 500;
      font-size: $uni-font-size-sm;
    }

    :deep(.uni-easyinput__placeholder-class) {
      font-family: PingFangSC;
        color: #999999;
       font-weight: normal;
       font-size:$uni-font-size-26;
    }
  }
}

.cont {
  position: relative;
  height: 400rpx;

}

.loading-text {
  text-align: center;
  font-size: $uni-font-size-base;
  color: #666;
  padding: 20rpx 0 50rpx;
}


//图片
.card {
  width: 100%;
  border-radius: 16rpx;
  background-color: #FFFFFF;
  box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.05);
  margin-bottom: 120rpx;
  padding-bottom: 20rpx;
  .title {
    height: 100rpx;
    margin: 0 30rpx;
    padding-left: 15rpx;
    font-family: PingFangSC;
    color: $uni-text-color;
    font-weight: $uni-font-weight;
    font-size: 30rpx;
    display: flex;
    align-items: center;
    border-bottom: 1rpx solid #efefef;
  }
    :deep(.u-upload) {
      margin: 30rpx;
   
}

.uploadimg {
  width: 60rpx;
  height: 48rpx;
}
}

//  修改内容
.edit_button {
  height: 144rpx;
  width: 90%;
  padding: 0 5%;
  background-color: #ffffff;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 98;
  display: flex;

  .del {
    width: 176rpx;
    height: 90rpx;
    border-radius: 50rpx;
    border: 2rpx solid $uni-color-primary;
    color: $uni-color-primary;
    font-family: PingFangSC;
    color: $uni-color-primary;
    font-weight: $uni-font-weight;
    font-size: 34rpx;
  }

  .edit {
    margin-left: 20rpx;
    width: 454px;
    height: 90rpx;
    border-radius: 50rpx;
    font-family: PingFangSC;
    color: #FFFFFF;
    font-weight: $uni-font-weight;
    font-size: 34rpx;
    background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
  }
}
</style>